<template>
	<view class="fxq-pages" v-if="isLoad">
		<block v-if="!isSuccess">
			<fixed v-if="file_list[1]">
				<view class="nav-list flex-center fill-base b-1px-b">
					<view class="nav-item flex-center flex-1 f-mini-title " v-for="(item,index) in typeList" :key="index"
					@tap="changeNav(item.id)" :class="[{'text-bold':item.id == activeIndex}]" :style="{color: item.id == activeIndex? primaryColor : '#333'}">{{item.title}}</view>
				</view>
			</fixed>
			<view class="content">
				<!-- <web-view src="https://api.huixuananmm.com/fxq.html" bindmessage="onMessage" doSomething="onMessage" @doSomething="onMessage"></web-view> -->
				<block v-for="(item,index) in coachInfo.is_fxq == 0 ? imageArr[activeIndex].image : imageArr[activeIndex].contract_image" :key="index">
					<image :src="item" mode="widthFix" 
					@tap="$util.previewImage({current:item,urls: coachInfo.is_fxq == 0 ? imageArr[activeIndex].image : imageArr[activeIndex].contract_image})"></image>
				</block>
			</view>
			
			<view :class="[{'space-max-footer': coachInfo.is_fxq == 0}, {'space-footer': coachInfo.is_fxq == 1}]"></view>
			<fix-bottom-button @confirm="toConfirm" v-if="coachInfo.is_fxq == 0"
				:text="[{type:'confirm',text:'合同签署'}]" bgColor="#fff">
			</fix-bottom-button>
		</block>
		<block v-else>
			<view class="flex-center icon-box">
				<image class="suc-img" src="https://api.huixuananmm.com/admin/public/apply_suc.png" mode="aspectFill"></image>
			</view>
			<view class="flex-center f-paragraph">签署成功</view>
			<view class="flex-center success-btn-box">
				<view class="success-btn flex-center f-mini-title" :style="{border: `1px solid ${primaryColor}`,color: primaryColor}"
				@tap="$util.goUrl({url: `/technician/pages/mine`, openType: 'redirectTo'})">返回个人中心</view>
			</view>
		</block>
		
		
		<uni-popup ref="show_phone_item" :maskClick="true" :zIndex="999">
			<view class="common-popup-content popup-phone pd-lg flex-center flex-column fill-base">
				<view class="f-md-title c-black">意愿认证</view>
				<!-- <view class="f-caption c-caption">您暂未绑定手机号，快来绑定吧</view> -->
				<view class="space-lg pb-lg"></view>
				<view class="space-lg pb-lg"></view>
				<view class="flex-center mb-lg">
					<view class="input-info sm mr-md radius-16">
						<input v-model="subForm.phone" type="number"
							class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title"
							placeholder-class="c-placeholder" :placeholder="subRule[0].errorMsg" />
					</view>
					<view @tap="toSend" class="send-btn flex-center c-base radius-16"
						:style="{background:primaryColor}">
						{{authTime>0?`(${authTime}s)`:'发送'}}
					</view>
				</view>
				<view class="input-info radius-16">
					<input v-model="subForm.code" type="number"
						class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title" maxlength="6"
						placeholder-class="c-placeholder" :placeholder="subRule[1].errorMsg" />
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_phone_item.close()" class="item-child">
						取消
					</view>
					<view @tap.stop="submit" class="item-child" :style="{background: primaryColor,color:'#fff'}">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import parser from "@/components/jyf-Parser/index"
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {
			parser
		},
		data() {
			return {
				timer: null,
				authTime: 0,
				subForm: {
					phone: '',
					code: ''
				},
				subRule: [{
					name: "phone",
					checkType: "isMobile",
					errorMsg: "请输入手机号",
					regText: "手机号"
				}, {
					name: "code",
					checkType: "isNotNull",
					errorMsg: "请输入短信验证码"
				}],
				imageArr: [],
				typeList: [
					{title: '合同', id: 0},
					{title: '承诺书', id: 1}
				],
				activeIndex: 0,
				isLoad: false,
				isSuccess: false,
				submitTap: false,
				lockTap: false,
				file_list: []
			}
		},
		computed: mapState({
			coachInfo: state => state.user.coachInfo,
			configInfo: state => state.config.configInfo,
		}),
		onLoad() {
			this.$util.showLoading()
			this.initIndex()
		},
		methods:{
			...mapActions(['getConfigInfo', 'getCoachInfo', ]),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				let fxq_info = ''
				let {
					is_fxq = 0
				} = this.coachInfo
				if(!is_fxq){
					fxq_info = await this.$api.technician.addContract()
				}else{
					await this.getCoachInfo()
					fxq_info = this.coachInfo.fxq_info
				}
				
				let imageArr = []
				if(fxq_info){
					fxq_info.file_list.forEach(item => {
						item.company_view_contract_img = item.company_view_contract_img ? JSON.parse(item.company_view_contract_img) : []
						item.coach_view_contract_img = item.coach_view_contract_img ? JSON.parse(item.coach_view_contract_img) : []
						imageArr[item.type - 1] = {
							image: item.company_view_contract_img,
							contract_image: item.coach_view_contract_img
						}
					})
					this.imageArr = imageArr
					this.file_list = fxq_info.file_list
				}
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
				this.isLoad = true
				this.$util.hideAll()
			},
			onMessage(e){
				console.log(e, '========> onMessage')
			},
			toConfirm(){
				this.$refs.show_phone_item.open()
			},
			changeNav(id){
				this.activeIndex = id
			},
			//表单验证
			validate(param, is_send = false) {
				let validate = new this.$util.Validate();
				this.subRule.map(item => {
					let {
						name,
					} = item
					if (name == 'code' && is_send) return
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			// 发送验证码
			async toSend() {
				let {
					authTime
				} = this
				if (authTime) return
				let {
					phone = ''
				} = this.subForm
				let msg = this.validate({
					phone
				}, true);
				if (msg) {
					this.$util.showToast({
						title: msg
					});
					return;
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.technician.sendFxqCode({
						phone
					})
					this.$util.hideAll()
					this.lockTap = false
					this.subForm.code = ''
					let time = 60
					this.timer = setInterval(() => {
						if (time === 0) {
							clearInterval(this.timer)
							return
						}
						time--
						this.authTime = time
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			async submit(){
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				
				if (param.code.length != 6) {
					this.$util.showToast({
						title: `请输入6位数短信验证码`
					})
					return
				}
				if(this.submitTap) return
				this.submitTap = true
				try{
					this.$util.showLoading()
					await this.$api.technician.fxqSign(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `签署成功`
					})
					this.isSuccess = true
					this.submitTap = false
					this.$refs.show_phone_item.close()
				}catch(e){
					setTimeout(()=>{
						this.$util.hideAll()
						this.submitTap = false
					},2000)
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.fxq-pages{
		.nav-item{
			height: 88rpx;
		}
		.content{
			image {
				width: 100%;
			}
		}
		.popup-phone {
			width: 630rpx;
		
			.input-info {
				width: 570rpx;
				height: 90rpx;
				background: #F7F7F7;
		
				.item-input {
					height: 90rpx;
					font-size: 32rpx;
					text-align: left;
				}
			}
		
			.input-info.sm {
				width: 400rpx;
			}
		
			.send-btn {
				width: 150rpx;
				height: 90rpx;
			}
		}
		.icon-box{
			padding-top: 127rpx;
			.suc-img{
				
			}
		}
		.success-btn-box{
			padding-top: 90rpx;
			.success-btn{
				width: 285rpx;
				height: 92rpx;
				border-radius: 92rpx;
				
			}
		}
	}
</style>